<template>
    <div class="m-pop" :class="{on:is_show_pop}">
        <div class="mask" :class="{on:is_show}" v-on:click="close()"></div>
        <div class="content" :class="{on:is_show}" ref="m_pop_content">
            <slot></slot>
        </div>
    </div>

</template>

<script>
export default {
    name: 'm_pop',
    data () {
        return {
        	is_show_pop:false,
			is_show:false,
			type:'normal'
        }
    },
    methods:{
        close:function ()
		{
			let self=this;
            this.is_show=false;
			setTimeout(function () {
				self.is_show_pop=false;
			},300);
		},
        show:function ()
		{
			let self=this;
			self.is_show_pop=true;
			setTimeout(function () {
				self.is_show=true
					   },30);

		}
    }

}
</script>
<style scoped>
    .m-pop{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top:0;
        z-index: 9999;
        display: none;
    }
    .m-pop.on{
        display: block;
    }
    .m-pop .mask{
        background: rgba(0,0,0,0.75);
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top:0;
        z-index: 1;
        opacity: 0;
        transition: 0.3s all ease-out;
    }
    .m-pop .mask.on{
        opacity: 1;
    }
    .m-pop>.content{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 100%;
        opacity: 0;
        left:0;
        z-index: 2;
        overflow: hidden;
        transition: 0.3s all ease-out;
    }
    .m-pop .content.on{
        top:0;
        opacity: 1;

    }
</style>
